<template>

<div>
    <div>1111</div>
    <video ref='selfVideo' controls autoplay style="text-align:right;"></video>
    <div><button @click="talkHandle()">实时语音</button></div>

</div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    
    talkHandle: function() {
      let _that =this
      
      let obj = new window.ZLMRTCClient.Endpoint({
          
          debug: true,// 是否打印日志
          // zlmsdpUrl: "https://192.168.101.113:2443/index/api/webrtc?app=audio&stream=1E660B48&type=push&sign=111",//流地址
          // zlmsdpUrl: "https://8.137.32.128:8023/index/api/webrtc?app=audio&stream=1E660B48&type=push&sign=111",//流地址
          zlmsdpUrl: "https://192.168.1.254:11102/index/api/webrtc?app=audio&stream=1E660B48&type=push&sign=111",//流地址
          simulcast: false,
          useCamera: false,
          audioEnable: true,
          videoEnable: false,
          recvOnly: false,
          resolution: { w: 0, h: 0 },
          usedatachannel: false,
        });
        
        obj.on("WEBRTC_ICE_CANDIDATE_ERROR", function (e) {// ICE 协商出错
          console.log('ICE 协商出错', e)
        });

        obj.on("WEBRTC_ON_REMOTE_STREAMS", function (e) {//获取到了远端流，可以播放
          console.log('播放成功', e.streams)
        });

        obj.on("WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED", function (e) {// offer anwser 交换失败
          console.log('offer anwser 交换失败', e);

          console.log("交换失败");
        });

        obj.on("WEBRTC_ON_LOCAL_STREAM", function (s) {// 获取到了本地流

          console.log("that.refs == ", _that.$refs)
          _that.$refs.selfVideo.srcObject = s;
          _that.$refs.selfVideo.muted = true;

          //console.log('offer anwser 交换失败',e)
        });

        obj.on("CAPTURE_STREAM_FAILED", function (s) {// 获取本地流失败

          console.log('获取本地流失败', s)
        });

        obj.on("WEBRTC_ON_CONNECTION_STATE_CHANGE", function (state) {// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
          console.log('当前状态==>', state)
          if (state === "connected") {
            //推流成功开始下发语音对讲指令
            _that.$axios({
              method: 'get',
              headers: {
                  'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImY4M2I3MTY2LTY1NGUtNDJhYi04ZDMwLTQxMDMzZjNmNzBhMiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.aZ3kzQfnXT-N9npkJ3NPCwWEAWPLH0gUiXVCLzXGjUL9EYbpEG7ffT2BuxqappZFk2Vt6sF4ZC8yoQajqCCh8Q'
              },
              url: `/api/broadcast/startTalk?deviceId=510202298196534E1A90&channelId=510202298196534E1A90&mediaId=zlm300&forward=false`
            }).then(res => {
              if (res.data.code != 0) {
                console.log("res == ", res);
                return;
              }
              //指令下发成功
              
              _that.talkTitle = "停止对讲";
              _that.talkStatus = !_that.talkStatus;
              //下发指令成功后话筒闪烁
              _that.talkInterval = setInterval(() => {
                _that.microphoneStatus = !_that.microphoneStatus;
              }, 500);
            }).catch(error => {
              console.log("error = ", error)
             
            })
          } 
        });

        obj.on("WEBRTC_ON_DATA_CHANNEL_OPEN", function (event) {
          console.log('rtc datachannel 打开 :', event)
        });

        obj.on("WEBRTC_ON_DATA_CHANNEL_ERR", function (event) {
          console.log('rtc datachannel 错误 :', event)
        });

        obj.on("WEBRTC_ON_DATA_CHANNEL_CLOSE", function (event) {
          console.log('rtc datachannel 关闭 :', event)
        });
    }
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
